<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onMounted } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import draggable from 'vuedraggable'
const { proxy } = getCurrentInstance()

/* ---- */
const userInfo = proxy.$Store.get('userInfo') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}
const forSys = proxy.$Sys || []

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

/* ---- */
const user = reactive({
  tabId: 0,
  tabName: 'fees_name'
})
// ----
const dragOptions = {
  handle: '.mover',
  animation: 300,
  itemKey: 'id'
}
const items = ref([])

/* ---- */
const layer = ref()
const layerBox = ref()
const layerLoading = ref()

/* ---- */
// --getData--
const getListData = async (callback) => {
  const newItems = forSys.filter((item) => { return String(item.name) === user.tabName })
  if (Number(newItems.length) === 1) {
    user.tabId = newItems[0].id
    await proxy.$Myfun.getJsonData(newItems[0].value, (resJson) => {
      items.value = resJson
    })
  }
  // ----
  callback && callback()
}
// ----
const setSortNum = async () => {
  proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
  // ----
  const forValue = JSON.stringify(items.value)
  // ----
  await proxy.$http.patch('system/update?id=' + user.tabId, {
    value: forValue,
    // ----
    config_id: userInfo.config_id,
    openid: userInfo.openid
  }).then((res) => {}).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // ----
  proxy.$Myfun.disLoading(layerLoading.value, 'close')
}
// ----
const getAuditFun = (type, item) => {
  switch (Number(type)) {
    case 1: {
      const forItem = item || {}
      proxy.$Myfun.openPage(proxy, 'push', 'WagePayAdm', { id: forItem.id })
      break
    }
    case 2: {
      proxy.$Myfun.openPage(proxy, 'push', 'WagePayRegList', { id: item.id })
      break
    }
    case 3: {
      items.value.some((curItem, index) => {
        if (String(curItem.id) === String(item.id)) curItem.isOpenUse = !item.isOpenUse
      })
      // ----
      const forValue = JSON.stringify(items.value)
      // ----
      proxy.$http.patch('system/update?id=' + user.tabId, {
        value: forValue,
        // ----
        config_id: userInfo.config_id,
        openid: userInfo.openid
      }).then((res) => {}).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
      break
    }
  }
}

/* ---- */
onMounted(() => {
  getListData(() => {
    proxy.$Myfun.setDragMargin()
  })
})
onBeforeRouteLeave(() => { proxy.$Myfun.setScrollTop(proxy.$refs.formSection) })
</script>

<template>
  <div class="mescroll-touch" ref="formSection">
    <header class="xw-bg-gray">
      <div class="forTop xw-flex xw-flex-align">
        <div class="TOP-title xw-flex-W1">充值项目列表</div>
        <span class="TOP-submit xw-WBlue xw-radius-3" @click="getAuditFun(1)">增加项目</span>
      </div>
    </header>
    <div class="xw-drag">
      <div class="mescroll-empty" v-if="Number(items.length) === 0"><p class="empty-tip">{{$Global.noData}}</p></div>
      <draggable tag="ul" v-model="items" v-bind="dragOptions" @end="setSortNum" class="list-class xw-flex xw-flex-column" v-else>
        <template #item="{element, index}">
          <li class="xw-Tfg xw-bg-white">
            <div class="LCS-title xw-flex xw-flex-align">{{element.name}}：<em class="xw-color-11">{{element.amount}}</em>元</div>
            <div class="LCS-btns xw-flex xw-flex-align xw-flex-justify">
              <div class="xw-btn xw-WBlue" @click="getAuditFun(1, element)">修改</div>
              <div class="xw-btn xw-WBlue" @click="getAuditFun(2, element)">列表</div>
              <div class="LCS-check xw-flex xw-flex-align">
                <span>使用</span>
                <div class="USS-check" @click="getAuditFun(3, element)"><input type="checkbox" class="a-switch" v-model="element.isOpenUse"/><label></label></div>
              </div>
            </div>
            <span class="mover LCS-drag xw-act fa fa-bars xw-flex xw-flex-center"></span>
          </li>
        </template>
      </draggable>
    </div>
    <layer-view ref="layer"/>
    <layer-view ref="layerBox"/>
    <layer-view ref="layerLoading"/>
  </div>
</template>

<style scoped>
/* ---- */
.list-class li { position: relative; padding: 1.2rem 1rem; }
.list-class li:before { left: 1rem; }
.list-class li:nth-of-type(1):before { display: none; }
.LCS-title { font-size: 1.6rem; }
.LCS-btns { margin: 1rem 0 0; overflow: visible; }
.LCS-check { overflow: visible; }
.LCS-check div { overflow: visible; }
.LCS-drag { position: absolute; top: 1.2rem; right: 0; padding: 0 1.2rem; font-size: 2rem; }

/* ---- */
.sortable-chosen { background: #3388ff; color: #ffffff; }
</style>
